{% extends 'IMTDashboardBundle::layout.html.twig' %}

{% block main_title %}Appel téléphonique{% endblock %}

{% block include_style %}
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/imtevent/css/event_manager.css') }}">
<style>
.form-edit { display:none; } 
#em-plugin-general td { background-color: #FFF; }
#plug-general-loader { font-style:italic; padding:0px 8px; }
.ui-dialog .ui-dialog-content { overflow: hidden; }
#em-plugin-participants #contacts i { margin:0px 5px;}
.progress .bar, .progress.progress-info .bar {border: 0px;}
.contact-contents {max-height:600px;}
.contact-contents .contact-nav {background-color:#CCCCCC;}
</style>
{% endblock %}

{% block include_script %}
<script src="{{ asset('bundles/imtevent/js/event_manager.js') }}"></script>
<script>
$(document).ready(function() {	
	var defaultConfig = {{ em_config_json|raw }};
	console.log({{ em_config_json|raw }});
	var emConfig = $.extend(true, {}, defaultConfig, {
		options:{
			call:{
				isNew: {% if event_entity.id == 0 %}true{% else %}false{% endif %},
				data: {{ event_json|raw }},
				menu: {
					menuItems: {
						{% if em_config.options.call.menu.menuItems.general is defined %}
						general: {
							onClick: function(e){ e.preventDefault(); $('#navigation a[href="'+this.link+'"]').tab('show'); },
							view: {
								plugins: [
								    {% if is_granted('ROLE_PLUGIN_GENERAL') %}
								    {
										name: 'GeneralEventPlugin',
										element: '#em-plugin-generalcall',
										options: {},
										content: '{% render 'IMTPluginsGeneralCallBundle:Default:show' with {'idEvent':event_entity.id} %}'
									},
									{% endif %}
									{% if is_granted('ROLE_PLUGIN_PARTICPANTS') %}
									{
										name: 'ParticipantsEventPlugin',
										element: '#em-plugin-participants',
										idEvent: {% if event_entity.id %}{{ event_entity.id }}{% else %}0{% endif %},
										options: {
											urlBase: '{{ path('plugin_participants') }}',
											urlPattern: 'idEvent/action',
											urlUpdateAction: 'update-ajax-call',
										},
										content: '{% render 'IMTPluginsParticipantsBundle:Default:show' with {'idEvent':event_entity.id, 'type':'call'} %}'
									},
									{% endif %}
								]
							}
						},
						{% endif %}
						{% if em_config.options.call.menu.menuItems.commentaires is defined %}
						commentaires: {
							onClick: function(e){ 
								e.preventDefault(); 
								$('#navigation a[href="'+this.link+'"]').tab('show'); 
								$("#modal-timepicker").dialog("close");
							},
							view: {
								plugins:[
									{% if is_granted('ROLE_PLUGIN_COMMENTS') %}
									{
										name: 'CommentsPlugin',
										element: '#em-plugin-commentaires',
										idEvent: {% if event_entity.id %}{{ event_entity.id }}{% else %}0{% endif %},
										thread_id: '{{ thread.id }}',
										thread_api: '{{ path('fos_comment_get_threads') }}',
										script: '{{ asset('bundles/imtcomment/assets/js/comments.js') }}',										
										content: '{% render 'IMTPluginsCommentsBundle:Default:show' with {'idEvent':event_entity.id, 'type':'call'} %}'
									},
									{% endif %}
								]
							}
						},
						{% endif %}
						{% if em_config.options.call.menu.menuItems.piecesJointes is defined %}
						piecesJointes: {
							onClick: function(e){ 
								e.preventDefault(); 
								$('#navigation a[href="'+this.link+'"]').tab('show'); 
								$("#modal-timepicker").dialog("close");
							},
							view: {
								plugins: [
								    {
										name: 'AttachmentsPlugin',
										element: '#em-plugin-attachments',
										idEvent: {% if event_entity.id %}{{ event_entity.id }}{% else %}0{% endif %},
										options: {
											urlBase: '{{ path('plugin_attachments') }}',
											urlPattern: 'idEvent/action',
											urlUpdateAction: 'update-ajax-call'											
										},
										url: '{{ path('imt_attachment_upload') }}',
										url_flash: '{{ asset('plugins/plupload/plupload.flash.swf') }}',
										url_silverlight: '{{ asset('plugins/plupload/plupload.silverlight.xap') }}',
										content: '{% render 'IMTPluginsAttachmentsBundle:Default:show' with {'idEvent':event_entity.id, 'type':'call'} %}'
									},
								]
							}
						},
						{% endif %}
						toggleSidebar: {
							template: '<span id="sidebar-toggle" class="toggled"><span></span></span>'
						}
					},
					element: $('#navigation')
				}, 

				views: {}				
			}
		},

		plugins:[],
		
		// CSS chargés par l'eventManager
		cssLoader: [
			'{{ asset('bundles/imtevent/css/event.css') }}',
			'{{ asset('custom-plugins/contactlist/contactlist.css') }}',
			'{{ asset('assets/jui/timepicker/jquery-ui-timepicker.css') }}',
			'{{ asset('plugins/pnotify/jquery.pnotify.css') }}',
			'{{ asset('plugins/msgbox/jquery.msgbox.css') }}',
			'{{ asset('plugins/select2/select2.css') }}',
			'{{ asset('plugins/plupload/plupload.bootstrap/css/plupload.bootstrap.css') }}',
			'{{ asset('bundles/imtpluginsgeneralcall/css/jquery.countdown.css') }}',
		],
		// Scripts chargés par l'eventManager
		scriptLoader: {
			call: '{{ asset('bundles/imtevent/js/call.js') }}',
			general: '{{ asset('bundles/imtpluginsgeneral/js/general.js') }}',
			comments: '{{ asset('bundles/imtpluginscomments/js/comments.js') }}',
			participants: '{{ asset('bundles/imtpluginsparticipants/js/participants.js') }}',
			attachments: '{{ asset('bundles/imtpluginsattachments/js/attachments.js') }}',
			contactlist: '{{ asset('custom-plugins/contactlist/contactlist.min.js') }}',
			validator: '{{ asset('plugins/validate/jquery.validate.min.js') }}',
			notify: '{{ asset('plugins/pnotify/jquery.pnotify.min.js') }}',
			msgbox: '{{ asset('plugins/msgbox/jquery.msgbox.min.js') }}',
			select2: '{{ asset('plugins/select2/select2.min.js') }}',
			plupload: '{{ asset('plugins/plupload/plupload.full.js') }}',
			countdown: '{{ asset('bundles/imtpluginsgeneralcall/js/jquery.countdown.js') }}',
		},


		// Scripts dépendants
		scriptDependancy: {
			plupload: {
				pluploadboot: '{{ asset('plugins/plupload/plupload.bootstrap/plupload.bootstrap.js') }}',
				pluploadfr: '{{ asset('plugins/plupload/i18n/fr.js') }}',		
			},
		},

		onStart: function(){
			$(this).html('<div id="em-loader-event" style="text-align:center; padding:100px 0;">Chargement ...</div>');
		},
		onFinish: function(){
			$('#navigation li:first').addClass('active');
			$('#navigation li:last').attr('id', 'sidebar-toggle-wrap');
			$('.em-views-container .em-view:first', this).addClass('in active');
			$('#em-loader-event').remove();
			
			{% include 'IMTEventBundle::participation.html.twig' %}

			var liftoffTime = new Date();
			{% if event_entity.callTime %}
			liftoffTime = new Date(liftoffTime.getTime() - {{ event_entity.callTime }} * 1000);
			{% endif %}
			
			$('#plug-general-count-content').countdown({since: liftoffTime, compact: true, format: 'HMS'}); 
			$('#plug-general-count-content').countdown('pause');
			$('#plug-general-count-saver').attr('disabled', true);
			 
			$('#plug-general-count-starter').toggle(function() { 
		        $(this).text('Mettre en pause'); 
		        $('#plug-general-count-content').countdown('resume'); 
				$('#plug-general-count-saver').attr('disabled', false);
		    }, function() { 
		        $(this).text('Reprendre'); 
		        $('#plug-general-count-content').countdown('pause'); 
				$('#plug-general-count-saver').attr('disabled', false);
		    }); 

			$('#plug-general-count-saver').live('click', function(e) {
				e.preventDefault();
				
				var time = $('#plug-general-count-content').countdown('getTimes'),
					dataSend = {'time' : time[6]+time[5]*60+time[4]*3600+time[5]*86400 };				

				$.ajax({
	        		type: 'POST',
	        		url: '{{ path('plugin_general_call_minutor_ajax', {'idEvent' : event_entity.id}) }}',
	    		  	data: dataSend,
	    		    dataType: "json"
	        	}).done(function(jsonResult) {
					$.pnotify({
				        title: "Terminé !",
				        text: jsonResult.msg,
				        type: (jsonResult.result == 200) ? "success" : "error"
				    });
	        	}).fail(function(jqXHR, textStatus, errorThrown) {
	        		alert('Une erreur est survenue ('+errorThrown+')');
	        	}).always(function(jqXHR, textStatus, errorThrown) {});
			});
		}
	});
	
	eventManager = $('#eventManager').eventManager(emConfig);
});
</script>
{% endblock %}

{% block content %}
<div id="content" class="sidebar-minimized">
	<div id="content-outer">
		<div id="content-inner">
			<aside id="sidebar">
				<nav id="navigation" class="collapse"></nav>
			</aside>
		
			<section id="main" class="clearfix">
				<div class="row-fluid">
					<div class="span12">
						<div id="eventManager">
							
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
</div>

<div id="modal-plug-details" class="modal hide in">
	<div class="modal-header">
		<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
		<h3>Informations sur le plugin</h3>
	</div>
	<div class="modal-body">
		<div class="row-fluid">
			<div class="span12 widget" style="margin:0px;">
				<div class="widget-content user-box">
					<div class="thumbnail">
						image
					</div>
					<div class="info">
						<span class="name">Nom plugin <small>Activé le 11/11/2012</small></span>
						<ul class="attributes">
							<li><i class="icos-cog"></i> <a href="#">Paramétrer le plugin</a></li>
							<li><i class="icos-info-about"></i> <a href="#">Voir l'aide et la description</a></li>
							<li><i class="icos-off"></i> <a href="#">Se désabonner</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button data-dismiss="modal" type="button" class="btn btn-primary">Fermer</button>
	</div>
</div>
{% endblock %}